<template>
    <div class="container" :class="{ 'right-panel-active': isSignUpActive }" id="container">
      <div class="form-container sign-up-container">
        <form @submit.prevent="handleSignup">
          <h1>创建账户</h1> 
          <span>或使用你的电子邮箱账号注册</span>
          <input type="text" v-model="signupUsername" placeholder="用户名" required />
          <input type="password" v-model="signupPassword" placeholder="密码" required />
          <div :class="signupMessageClass">{{ signupMessage }}</div>
          <button type="submit">注 册</button>
        </form>
      </div> 
  
      <div class="form-container sign-in-container">
        <form @submit.prevent="handleLogin">
          <h1>登 录</h1>
          <span>或使用您的账户登录</span>
          <input type="text" v-model="loginUser" placeholder="用户名" required />
          <input type="password" v-model="loginPassword" placeholder="密码" required />
          <a href="#">忘记密码？</a>
          <div :class="loginMessageClass">{{ loginMessage }}</div>
          <button type="submit">登 录</button>
        </form>
      </div>
  
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>欢迎回来！</h1>
            <p>快来用个人信息登录，保持我们联系</p>
            <button class="ghost" @click="isSignUpActive = false">去 登 录</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>您好，朋友！</h1>
            <p>输入你的个人信息，与我们一起开启新的旅程</p>
            <button class="ghost" @click="isSignUpActive = true">去 注 册</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import api from '@/assets/js/api'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
 

  const router = useRouter()

  // 登录处理函数

  
  // 切换注册/登录界面
  const isSignUpActive = ref(false)
  
  // 登录表单
  const loginUser = ref('')
  const loginPassword = ref('')
  const loginMessage = ref('')
  const loginMessageClass = ref('')

  
const handleLogin = async () =>{
    const response = await api.login({
      username: loginUser.value,
      password: loginPassword.value
    })
    if (response.code === 200) {
      loginMessage.value = '登录成功！'
      loginMessageClass.value = 'success-message'
      localStorage.setItem('userId', response.data.id) // 将token存储到localStorage中
      router.push('/museum').then(() => {
      // 页面跳转后刷新
      window.location.reload();
    });
    } else {
      loginMessage.value = response.message
      loginMessageClass.value = 'error-message'
    } 
}
  
  
  // 注册表单
  const signupUsername = ref('')
  const signupPassword = ref('')
  const signupMessage = ref('')
  const signupMessageClass = ref('')
 
  const handleSignup = async () => {
    const response = await api.register({
      username: signupUsername.value,
      password: signupPassword.value
    })
    if (response.code === 200) {
      signupMessage.value = '注册成功！'
      signupMessageClass.value = 'success-message'
      router.push('/museum').then(() => {
      // 页面跳转后刷新
      window.location.reload();
    });
    } else {
      signupMessage.value = response.message
      signupMessageClass.value = 'error-message'
    }
  }



  </script>
  
  <style>
    @import '../../assets/css/login.css';
  </style>
  